<template>
	<u-popup border-radius="10" v-model="show"
		@close="close" @open="eventOpen" :mode="mode" 
		:height="height" :mask="mask"
		:closeable="closeable"
		:close-icon-pos="closeIconPos" 
		:z-index="zIndex"
	>
		<slot></slot>
		<view class="footer">
			<view style="display: flex;flex-direction: row;">
				<u-button type="primary" class="btn" @click="submit">
					保存
				</u-button>
				<u-button class="btn" @click="cancel">
					取消
				</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'js-general-popup',
		props: {
			/**
			 * 弹出方向，left|right|top|bottom|center
			 */
			mode: {
				type: String,
				default: 'bottom'
			},
			/**
			 * 是否显示遮罩
			 */
			mask: {
				type: Boolean,
				default: true
			},
			// 是否显示关闭图标
			closeable: {
				type: Boolean,
				default: false
			},
			// 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
			closeIconPos: {
				type: String,
				default: 'top-right'
			},
			// 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
			// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
			height: {
				type: String,
				default: '80%'
			},
			zIndex: {
				type: [Number, String],
				default: ''
			}
		},
		data() {
			return {
				/**
				 * 显示状态
				 */
				show: false
			}
		},
		watch: {
			
		},
		methods: {
			eventOpen(){
				// console.log("eventOpen...");
			},
			open(){
				this.show = true;
			},
			close(){
				this.show = false;
			},
			submit(){
				this.$emit("popupSubmit");
			},
			cancel(){
				this.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin-bottom: 5rpx;
	}
	.btn {
		width: 50%;
		margin: 10rpx;
	}
</style>